<template>
  <wujie-vue name="vue3" width="100%" height="100%" :url="url" />
</template>

<script lang="ts">
import { computed, defineComponent, watch } from 'vue'
import { useRoute } from 'vue-router/composables'
import wujieVue from 'wujie-vue2'

export default defineComponent({
  setup() {
    const route = useRoute()

    const url = computed(() => {
      return process.env.VUE_APP_VUE3_ENTRY + `#/${route.params.path}`
    })

    watch(
      () => route.params.path,
      () => {
        wujieVue.bus.$emit('vue3-router-change', `/${route.params.path}`)
      },
      { immediate: true }
    )

    return {
      url
    }
  }
})
</script>
